<!--projectBuildingTb对应编辑弹框-->
<template>
  <div class="mycontainer">
    <el-form :label-position="labelPosition" ref="form" :model="form">
      <el-row>
        <el-col span="9">
          <el-form-item label="信息提供人：">
            <el-input v-model="form.clueSource" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="9" :offset="6">
          <el-form-item label="项目前期跟踪：">
            <el-input v-model="form.projectTrack" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="9">
          <el-form-item label="关键因素项目成功推动：">
            <el-input v-model="form.keyName" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="9" :offset="6">
          <el-form-item label="成功落地签订合同：">
            <el-input v-model="form.contracts" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="9">
          <el-form-item label="项目编号：">
            <el-input v-model="form.projectCode" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="9" :offset="6">
          <el-form-item label="领取编号日期：">
            <el-input
              v-model="form.strContractCreateTime"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="9">
          <el-form-item label="业主名称：">
            <el-input v-model="form.customerName" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="9" :offset="6">
          <el-form-item label="项目名称：">
            <el-input v-model="form.projectName" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="9">
          <el-form-item label="项目进展：">
            <el-input
              v-model="form.strProjectStatus"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col span="9" :offset="6">
          <el-form-item label="项目区域：">
            <el-input v-model="form.areaName" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="9">
          <el-form-item label="合同收回情况：">
            <el-input
              v-model="form.strContractGetState"
              :disabled="true"
            ></el-input>
            <!-- <el-date-picker v-model="form.contractGetState" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width:100%;"></el-date-picker> -->
          </el-form-item>
        </el-col>
        <el-col span="9" :offset="6">
          <el-form-item label="合同金额（元）：">
            <el-input
              v-model="form.strContractAmount"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="9">
          <el-form-item label="项目类型:">
            <el-input v-model="form.businessType" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="9" :offset="6">
          <el-form-item label="项目经理：">
            <el-input v-model="form.projectManager" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="9">
          <el-form-item label="领取合同日期：">
            <el-input
              v-model="form.strContractCreateTime"
              :disabled="true"
            ></el-input>
            <!-- <el-date-picker v-model="form.contractGetDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width:100%;"></el-date-picker> -->
          </el-form-item>
        </el-col>
        <el-col span="9" :offset="6">
          <el-form-item label="工程投资（元）:">
            <el-input
              v-model="form.strProjectInvestment"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="9">
          <el-form-item label="备案时间:">
            <el-input v-model="form.strRecordTime" :disabled="true"></el-input>
            <!-- <el-date-picker v-model="form.recordTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width:100%;"></el-date-picker> -->
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 项目进度开始 -->
      <el-row style="width: 100%; height: 240px">
        <el-col span="24" style="margin-top: 20px"
          ><h4>项目进度（工程量）</h4></el-col
        >
        <el-col
          span="24"
          style="margin-bottom: 10px; color: #909399; font-size: 12px"
          >单位%,精确到小数点后1位</el-col
        >
        <el-col span="24">
          <!-- <el-form-item label="项目进度（工程量）"> -->
          <el-table
            :data="form.work"
            border
            style="width: 100%; margin-top: 5px"
            @cell-click="handleCellClick"
            size="mini"
            @cell-mouse-leave="handleCellLeave"
            header-cell-class-name="table-header-gray"
          >
            <el-table-column
              prop="jan"
              label="1月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.jan"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.jan }}</div>
              </div>
            </el-table-column>
            <el-table-column
              prop="feb"
              label="2月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.feb"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.feb }}</div>
              </div>
            </el-table-column>
            <el-table-column
              prop="mar"
              label="3月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.mar"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.mar }}</div>
              </div>
            </el-table-column>
            <el-table-column
              prop="apr"
              label="4月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.apr"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.apr }}</div>
              </div>
            </el-table-column>
            <el-table-column
              prop="may"
              label="5月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.may"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.may }}</div>
              </div>
            </el-table-column>
            <el-table-column
              prop="jun"
              label="6月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.jun"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.jun }}</div>
              </div>
            </el-table-column>
            <el-table-column
              prop="jul"
              label="7月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.jul"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.jul }}</div>
              </div>
            </el-table-column>
            <el-table-column
              prop="aug"
              label="8月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.aug"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.aug }}</div>
              </div>
            </el-table-column>
            <el-table-column
              prop="sept"
              label="9月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.sept"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.sept }}</div>
              </div>
            </el-table-column>
            <el-table-column
              prop="oct"
              label="10月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.oct"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.oct }}</div>
              </div>
            </el-table-column>
            <el-table-column
              prop="nov"
              label="11月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.nov"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.nov }}</div>
              </div>
            </el-table-column>
            <el-table-column
              prop="december"
              label="12月"
              align="center"
              show-overflow-tooltip
            >
              <div class="item" slot-scope="scope">
                <el-input
                  class="item__input"
                  v-model="scope.row.december"
                  :disabled="true"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="item__txt">{{ scope.row.december }}</div>
              </div>
            </el-table-column>
          </el-table>
          <!-- </el-form-item>      -->
        </el-col>
      </el-row>
      <!-- 项目进度结束 -->

      <!-- 应收款开始 -->
      <el-row style="width: 100%">
        <el-col span="24" style="margin-bottom: 10px"
          ><h4>应收款（元）</h4></el-col
        >
      <el-col :span="7.9">
        <el-table
          :data="tableDataBack"
          size="mini"
          style="width: 100%"
          header-cell-class-name="table-header-gray"
          v-loading="isShowloading"
          border="1px solid gray"
        >
          <el-table-column
            prop="timesBack"
            align="center"
            label="笔数"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="moneyBack"
            align="center"
            label="金额"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </el-col>
      </el-row>
      <!-- 应收款结束 -->
      <!-- 已回款开始 -->
      <el-row style="width: 100%">
        <el-col span="24" style="margin-bottom: 10px"
          ><h4>应收款（元）</h4></el-col
        >
      <el-col :span="7.9">
        <el-table
          :data="tableDataReceived"
          size="mini"
          style="width: 100%"
          header-cell-class-name="table-header-gray"
          v-loading="isShowloading"
          border="1px solid gray"
        >
          <el-table-column
            prop="timesReceived"
            align="center"
            label="笔数"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="moneyReceived"
            align="center"
            label="金额"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="moneyReceived"
            align="center"
            label="结算时间"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </el-col>
      </el-row>

      <!-- 已回款结束 -->

      <el-row>
        <el-col span="24">
          <el-form-item label="备注:">
            <el-input
              type="textarea"
              v-model="form.buildingRemark"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
 
<script>
import { InvitationStatisticsTable } from '@/api/bigdata.js';
export default {
  components: {},
  data () {
    return {
      labelPosition: 'top',
      tableDataBack: [],
      tableDataReceived: [],
      form: {
        idGetDate: '',
        projectCode: '',
        projectName: '',
        customName: '',
        contractAmount: '',
        projectType: '',
        projectManager: '',
        projectArea: '',
        projectInvestment: '',
        remark: '',
        tableData: [],
        sumWork: 0.0,
        work1: 0.0,
        work2: 0.0,
        work3: 0.0,
        work4: 0.0,
        work5: 0.0,
        work6: 0.0,
        work7: 0.0,
        work8: 0.0,
        work9: 0.0,
        work10: 0.0,
        work11: 0.0,
        work12: 0.0
        // timesBack:0,
        // moneyBack:0.0,

      }
    };
  },
  methods: {
    //  获取项目进展表格数据
    loadTableData () {
      // if(JSON.stringify(this.form.work))
      let params = {
        projectId: this.form.projectCode
      };
      return new Promise((resolve, reject) => {
        console.info(this.form.projectCode);
        InvitationStatisticsTable.listWork(this, params)
          .then((res) => {
            console.info('绑定数据');
            if (this.form.work === undefined || this.form.work.length <= 0) {
              if (res.data[0] == null) {
                this.form.work = [
                  {
                    jan: '',
                    feb: '',
                    mar: '',
                    apr: '',
                    may: '',
                    jun: '',
                    jul: '',
                    aug: '',
                    sept: '',
                    oct: '',
                    nov: '',
                    december: ''
                  }
                ];
                console.info('空数据');
              } else {
                this.form.work = res.data;
                console.info('有数据');
              }
              console.info(JSON.stringify(this.form.work));
            }
          })
          .catch((e) => {
            reject(e);
          });
      });
    },

    //  获取应收款表格数据
    loadMeneyBack () {
      // if(JSON.stringify(this.form.work))
      let params = {
        projectCode: this.form.projectCode
        // projectCode : 'BAHZ221001'
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.listMeneyBack(this, params)
          .then((res) => {
            this.tableDataBack = res.data;
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    //  获取已回款表格数据
    loadMeneyReceivedTableData () {
      // if(JSON.stringify(this.form.work))
      let params = {
        projectCode: this.form.projectCode
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.listMeneyReceived(this, params)
          .then((res) => {
            this.tableDataReceived = res.data;
            console.info('有数据');
            console.info(JSON.stringify(res.data[0]));
            window.alert(JSON.stringify(this.tableDataReceived));
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    dataInit (data) {
      if (data) {
        //  this.form = JSON.parse(JSON.stringify(data));
        this.form = data;
        console.info(data);
        this.loadTableData();
        // this.loadMeneyBackTableData();
        // this.loadMeneyReceivedTableData();
        this.loadMeneyBack();
        this.loadMeneyReceivedTableData();
      }
    },
    offSubmit () {
      this.$emit('closeWindow');
    },
    onSubmit () {
      let params = this.form; // undifined
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.updateProjectBuilding(this, params).then(
          (res) => {
            // ?=res.data
            // let copy = Object.assign({}, this.form);//row是所编辑本行内数据对象
            this.$emit('updateWindow');
          }
        );
      });
    },
    /** 鼠标点击cell */
    handleCellClick (row, column, cell, event) {
      const property = column.property;
      if (this.editProp.includes(property)) {
        cell.querySelector('.item__input').style.display = 'block';
        cell.querySelector('.item__txt').style.display = 'none';
      }
    },
    /** 鼠标移出cell */
    handleCellLeave (row, column, cell, event) {
      const property = column.property;
      if (this.editProp.includes(property)) {
        cell.querySelector('.item__input').style.display = 'none';
        cell.querySelector('.item__txt').style.display = 'block';
      }
    }
  }
};
</script>
<style>
.mycontainer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>
<style lang='scss'>
.item {
  .item__input {
    display: none;
    width: 95px;
    /* 调整elementUI中样式 如果不需要调整请忽略 */
    .el-input__inner {
      height: 24px !important;
    }
    /* 调整elementUI中样式 如果不需要调整请忽略 */
    .el-input__suffix {
      i {
        font-size: 12px !important;
        line-height: 26px !important;
      }
    }
  }
  .item__txt {
    display: block;
    box-sizing: border-box;
    line-height: 24px;
    padding: 0 9px;
  }
}
</style>
